<template>
  <student_Home/>
  <div class="contain">
    <h1 class="topic">课程通知</h1>
    <div class="search-box">
      <input
        type="text"
        placeholder="Search ..."
        @input="searchAction($event)"
        class="search"
      />
      <Icon
        icon="ep:search"
        color="#bac34e"
        class="Icon"
      />
    </div>
    <div class="container">
      <ul v-if="searchResult.length > 0">
        <li
          v-for="item in searchResult"
          :key="item.id"
        >
          <div class="coursecard">
            <h4>{{ item.lectureName }}</h4>
            <h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.lectureContent }}</h5>
            <router-link
              :to="'/courses/' + item.id"
              class="link"
            >
              <a class="btn">
                <div class="btn-text">>>查看详情</div>
              </a>
            </router-link>
          </div>
        </li>
      </ul>
      <ul v-else>
        <li
          v-for="item in lectureList"
          :key="item.id"
        >
          <div class="coursecard">
            <h4>{{ item.lectureName }}</h4>
            <h5>{{ item.lectureContent }}</h5>
            <router-link
              :to="'/courses/' + item.id"
              class="link"
            >
              <a class="btn">>>查看详情</a>
            </router-link>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { throttle } from '../libs/utils';
import { Icon } from '@iconify/vue';
import axios from 'axios'
import student_Home from "./student_Home.vue"
export default {
  components: {
    Icon,
    'student_Home': student_Home
  },
  data() {
    return {
      lectureList: [
        {
          "id": 8,
          "createTime": "2023-12-05T01:27:22.277+00:00",
          "updateTime": "2023-12-05T01:27:22.277+00:00",
          "deleted": false,
          "lectureName": "java",
          "lectureContent": "G楼的第一堂课",
          "lectureTime": "2023-12-05",
          "lecturePlace": "G101",
          "teacherId": 1,
          "isNotificated": false,
          "trainningPlanId": 2
        }
      ],
      searchResult: [],//搜索结果
    }
  },

  created() {
    this.loadData();
  },
  methods: {
    searchAction: throttle(function (e) {
      const inputValue = e.target.value;

      this.searchResult = this.lectureList.filter((item) => {
        if (item.lectureName.includes(inputValue)) {
          return item;
        }
      })
    }, 500),

    loadData() {
      let that = this;
      axios.get('/api/lecture/queryList', {
        params: {
          deleted: false,
        }
      })
        .then((response) => {
          console.log(response);
          // this.lecturelist=response.data;
          console.log(response.data.data);
          that.lectureList = response.data.data;
          console.log(lectureList);

        })
        .catch(function (error) {
          console.log(error);
        })
        .finally(function () {
          //总是会执行
        })
    }
  }
}
</script>

<style lang="css" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* background-color: linear-gradient(45deg, #00bcd4, #ffeb3d) !important; */
}

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  max-width: 100vw;
  /* background-color: linear-gradient(45deg, #00bcd4, #ffeb3d) !important; */
}

.contain {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: url('../assets/image/5b5bb3f14863b.jpg');
  /* background-color: #000000; */
  background-size: cover;
}

ul {
  list-style: none;
}

router-link :active {
  text-decoration: none;
}

a {
  text-decoration: none;
}

.topic {
  position: absolute;
  top: 90px;
  left: 50px;
  width: 150px;
  height: 50px;
  color: #fff;
}

.search {
  position: relative;
  /* top: 140px;
  left: 20vw; */
  top: 0;
  left: 0;
  width: 60vw;
  outline: none;
  height: 40px;
}

.search-box input:active {
  color: #bac34e;
}

.search-box .Icon {
  position: absolute;
  top: 7px;
  font-size: 160%;
  right: 10px;
}

.search-box {
  position: absolute;
  top: 140px;
  left: 20vw;
  width: 60vw;
}


.container {
  position: absolute;
  top: 200px;
  left: 20vw;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px 100px;
  padding: 0px 0px;
}

.container .coursecard {
  position: relative;
  width: 60vw;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(77, 77, 77, 0.744);
  border: 1px;
  border-radius: 8px;
  /* background: linear-gradient(to right top, #65dfc9, #6cdbeb); */
  /* border-radius: 20px; */
  /* box-shadow: 0 35px 50px rgba(0, 0, 0, 0.15); */
  transition: 0.5s;
  display: flex;
  justify-content: start;
  align-items: flex-start;
  margin-top: 0px;
  margin-bottom: 30px;
  overflow: hidden;
}

.container .coursecard h4 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 20px;
  left: 35%;
  transform: translateX(-50%);
  font-size: 260%;
  color: black;
  transition: 0.5s;
}

.container .coursecard:hover h4 {
  font-size: 150%;
  position: absolute;
  left: 70px;
  top: 30px;
}

.container .coursecard h5 {
  position: absolute;
  top: 300px;
  width: 400px;
  height: 100px;
  padding: 0 30px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  transition: 0.5s;
}

.container .coursecard:hover h5 {
  top: 10px;
  left: 130px;
  height: 80px;
  width: 470px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.container .coursecard a {
  position: absolute;
  /* right: 50px; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  border: solid;
  transition: 0.5 linear;
  overflow: hidden;
  /* border-radius: 60px; */
  border-color: transparent;
  /*边框颜色*/
  background-color: #bac34e;
  /*按钮背景颜色*/
  color: #fff;
  /*字体颜色*/
}

/* .container .coursecard .btn-text{
  position: relative;
  z-index: 200;
} */

.container .coursecard a:hover {
  border-color: transparent;
  /*边框颜色*/
  background-color: #222222;
  /*按钮背景颜色*/
  color: #fff;
  /*字体颜色*/
}

/* .container .coursecard a:before{
  content: '';
  position: absolute;
  top: 0;
  left: -45px;
  height: 100%;
  width: 150%;
  background-color: #222222;
  color:#fff;/*字体颜色 
  transform: translateX(-100%) skew(40deg);
  transition: transform 0.5s linear;
}*/

/* .container .coursecard a:hover::before{
  transform: translateX(-1%)skew(40deg);
}  */

.container .coursecard .link {
  position: absolute;
  right: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  top: 25px;
}</style>



